<template>
    <div class="main">
		<div class="header">
		  <van-nav-bar title="我的订单" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
		</div>
		<van-tabs  @click="selectOrder" swipeable v-model="active" color="#01bf47">
			<van-tab class="van-tab--active" title="全部订单"></van-tab>
			<van-tab title="待付款"></van-tab>
			<van-tab title="待发货"></van-tab>
			<van-tab title="待收货"></van-tab>
			<van-tab title="待评价"></van-tab>
			<van-tab title="已结束"></van-tab>
		</van-tabs>
		<div>
			<van-list :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="selectOrder">
				<div class="list">
					<ul>
						<li v-for="(item,index) in dataList.list"
								:key="index">
							<div class="top" @click="toFarmIndex(item.orderDetailId)">
								<div class="left">{{item.shopName}}</div>
								<div class="right">
									{{item.shippingState}}
								</div>
							</div>
							<div class="box_content" @click="toFarmIndex(item.orderDetailId)">
								<div class="left">
									<img :src="item.goodImageUrl" alt>
								</div>
								<div class="right">
									<div class="title">{{item.productName}}</div>
									<div class="subtitle">{{ellipsis(item.groupName)}}</div>
									<div class="adress">
									</div>
									<div class="price">
										<span>总计：{{item.price}}</span>
									</div>
								</div>
							</div>
							<div class="bottom">
								<div class="left">共计{{item.quantity}}件商品 </div>
								<div class="right">
									<van-button type="default" @click="bindCancel(item.orderId)" v-if="item.shippingState==='待支付' || item.shippingState==='待发货'">取消订单</van-button>
									<van-button type="primary" v-if="item.paymentState===2" @click="toWxPay(item.orderId)">再次支付</van-button>
									<van-button type="primary" v-if="logistics">查看物流</van-button>
									<van-button type="danger" v-if="isCheck">确认收货</van-button>
									<van-button type="primary" v-if="evaluate">评价</van-button>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</van-list>
		</div>
       
    </div>


</template>

<script>
    import { Dialog } from 'vant';
    export default {
        name: "AllOrders",
        data() {
            return {
                MyPost: [],
                pageSize:10,//每页数量
                pageNum: 1,//页码
                showlaoding: true, //是否显示loading效果
                status:0,
                dataList:{},
                finished:false,//是否加载完毕
                isCancel:false,
                rePayment:false,
                logistics:false,
                isCheck:false,
                evaluate:false,
                active:0,
            }
        },
        inject:['reload'],
        created:function () {
			
        },
        mounted: function () {
   //          let current=sessionStorage.getItem('userList');
			// console.log(current)
   //          if(current){
   //              this.active=parseInt(current);
   //          }else{
   //              this.active=0;
   //          };
			this.active=this.$route.query.aiv;
			this.selectOrder();
        },
        methods: {
            //返回
            onClickLeft() {
                this.$router.go(-1);
            },
            selectOrder(){
				this.finished = false;
              if(this.active==0){
                this.status=0;
              }else if(this.active==1){
                this.status=2;
              }else if(this.active==2){
                this.status=3;
              }else if(this.active==3){
                this.status=4;
              }else if(this.active==4){
                this.status=5;
              } else if(this.active==5){
                this.status=6;
              }else if(this.active==6){
                this.status=7;
              }
                let params={
                    params:{
                    pageSize:this.pageSize,
                    pageNum:this.pageNum,
                    status:this.status
                    }
                };
                var that=this;
                let res=this.$axios.get(this.$api.orderList,params);
                res.then(res => {
                    if(res.success){
                        that.dataList=res.data;
                        that.dataList.list.forEach((item, index) => {
						switch(item.shippingState){
							case 0:
								if(item.paymentState===2){
									item.shippingState="待支付";
									that.isCancel=true;
									that.rePayment=true;
								}else{
									item.shippingState="已取消";
								}
								break;
							case 3:
								item.shippingState="待发货";
								that.isCancel=true;
								break;
							case 4:
								item.shippingState="已发货";
								that.logistics=true;
								that.isCheck=true;
								break;
							case 5:
								item.shippingState="待评价";
								that.evaluate=true;
								break;
							case 6:
								item.shippingState="已完成";
								break;
							case 7:
								item.shippingState="售后处理中";
								break;
							default:
								item.shippingState="已取消";
								break;
                            }
                        });
						this.finished = true;
                    }
                }).catch(error => {
					this.finished = true;
                });
            },
			ellipsis (value) {
                if (!value) return ''
                if (value.length > 12) {
                    return value.slice(0,12) + '...'
                }
                return value
            },
			zellipsis (value) {
                if (!value) return ''
                if (value.length > 16) {
                    return value.slice(0,8) + '...'+value.slice(-8)
                }
                return value
            },
            bindCancel(orderId){

                var that=this;
                Dialog.confirm({
                    title: '确认取消订单？',
                    message: '还差一步即可获得新人大礼包'
                }).then(() => {

                    let params={
                        orderId :orderId,
                        state :"102"
                    };


                    let result=that.$axios.post(that.$api.orderStatus,params);

                    result.then(res=>{
                        if(res.success){
                            Dialog.alert({
                                title: '订单取消成功',
                                message: '已取消'
                            }).then(() => {
                                // on close
                                that.reload();
                            });
                        }else{
                            Dialog.alert({
                                title: '订单取消失败',
                                message: '订单已发生变化'
                            }).then(() => {
                                // on close
                                that.reload();
                            });
                        }
                    })


                }).catch(() => {
                    Dialog.alert({
                        title: '订单取消失败',
                        message: '订单已发生变化'
                    }).then(() => {
                        // on close
                        that.reload();
                    });

                });


            },
            bindCheck(){
                var that=this;
                Dialog.confirm({
                    title: '已经收到商品？',
                    message: '确认收货后费用将直接进入商家账户'
                }).then(() => {

                    let params={
                        orderId :orderId,
                        state :"5"
                    };


                    let result=that.$axios.post(that.$api.orderStatus,params);

                    result.then(res=>{
                        if(res.success){
                            Dialog.alert({
                                title: '订单取消成功',
                                message: '已取消'
                            }).then(() => {
                                // on close
                                that.reload();
                            });
                        }else{
                            Dialog.alert({
                                title: '订单取消失败',
                                message: '订单已发生变化'
                            }).then(() => {
                                // on close
                                that.reload();
                            });
                        }
                    })


                }).catch(() => {
                    Dialog.alert({
                        title: '订单取消失败',
                        message: '订单已发生变化'
                    }).then(() => {
                        // on close
                        that.reload();
                    });

                });
            },
            //跳转订单详情页
            toFarmIndex(orderDetailId) {

                this.$router.push({
                    path: "./orderDetail",
                    query: {
                        id: orderDetailId
                    }
                });

            },
            //跳转支付详情页
            toWxPay(orderId) {

                this.$router.push({
                    path: "./wxPay",
                    query: {
                        order_id: orderId
                    }
                });

            }
        },
    }

</script>

<style scoped>
	.header{
		height: 53px;
	}
    .list {
        width: 100%;
        height: 100%;

        min-height: calc(100vh - 2.55rem);
    }
    .list li {
        width: 100%;
        background: #fff;


        margin-top: 0.08rem;
        padding: 0 0.15rem;
        margin-bottom: 0.08rem;
    }
    .list .box_content {
        width: 100%;
        /* height: 1.56rem; */
        padding: 0.15rem 0;
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #f7f7f7;
    }
    .list .top{

        line-height: 40px;
        width: 100%;
    }
    .list .top .left{


        float:left;

    }
    .list .top .right{
        color:red;
        float:right;
    }


    .list .bottom{
        width: 100%;
        height:40px;
        line-height: 30px;
    }
    .list .bottom .left{


        float:left;

    }
    .list .bottom .right{
        color:red;
        float:right;
    }

    .list .bottom button{

        height: 30px;
        line-height:30px;
    }

    .list .box_content .left {
        min-height: 1.05rem;
        display: flex;
        -webkit-display: flex;
        justify-content: center;
        align-items: center;
    }
    .list .box_content .left img {
        width: 1.05rem;
        border-radius: 0.05rem;
        -webkit-border-radius: 0.05rem;
    }
    .list .box_content .right {
        padding-left: 0.15rem;
    }
    .list .box_content .right .title {
        font-size: 0.15rem;
        color: #333333;
        margin-bottom: 0.06rem;
    }
    .list .box_content .right .subtitle {
        font-size: 0.12rem;
        color: #8c8c8c;
        margin-bottom: 0.06rem;
    }
    .list .box_content .right .classification {
        display: flex;
        -webkit-display: flex;
        flex-wrap: wrap;
    }
    .list .box_content .right .classification > div {
        /* width: 0.45rem; */
        height: 0.2rem;
        background: #e4ffeb;
        color: #04b746;
        border-radius: 3px;
        display: flex;
        -webkit-display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 0.1rem;
        line-height: 0;
        padding: 0 0.06rem;
    }
    .list .box_content .right .classification > div:last-of-type {
        margin-right: 0;
    }
    .list .box_content .right .adress {
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 0.06rem;
    }
    .list .box_content .right .adress img {
        width: 0.13rem;
    }
    .list .box_content .right .adress span {
        font-size: 0.11rem;
        color: #808080;
        padding-left: 0.06rem;
    }
</style>
<style>
    .van-tabs__nav--card{
        margin: 0;
    }
</style>
